<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
        <title>头像管理</title>
        <link th:href="@{/lib/cropbox/cropbox.css}" rel="stylesheet" type="text/css"/>
    </head>
    <body class="gray-bg">
        <form id="form_avatar">
            <div class="container animated fadeInRight form-content">
                <div class="avatar-wrapper"></div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <input id="avatar_src" name="avatar_src" type="hidden">
                        <input id="avatar_data" name="avatar_data" type="hidden">
                        <a href="javascript:void(0)" class="upload-img"> <label for="avatar_file">选择图像</label> </a>
                        <input type="file" class="" id="avatar_file" name="avatar_file" accept="image/*"/>
                    </div>
                    <div class="avatar-btns">
                        <button type="button" class="Btnsty_peyton form-submit" onclick="save()"><i class="fa fa-check"></i></button>&nbsp;
                        <button type="button" class="Btnsty_peyton" data-method="rotate" data-option="-15"><i class="fa fa-rotate-left" data-method="rotate" data-option="-15"></i></button>
                        <button type="button" class="Btnsty_peyton" data-method="rotate" data-option="15"><i class="fa fa-rotate-right" data-method="rotate" data-option="15"></i></button>
                    </div>
                </div>
                <div class="cropped mt10">
                    <div class="avatar-preview preview-lg"></div>
                    <div class="avatar-preview preview-md"></div>
                    <div class="avatar-preview preview-sm"></div>
                </div>
            </div>
        </form>

        <div th:replace="/common/include :: footer"></div>
        <div th:replace="/common/include :: cropperJs"></div>

        <script th:inline="javascript">
            var avatar = [[${id}]];
            var layer_index = [[${layer_index}]];
            var layer_callback = [[${layer_callback}]];
            var prefix = ctx + 'api/system/user';

            $(function () {
                if ($.common.isNotEmpty(avatar) && avatar !== 'null') {
                    $.crop.init('api/file/preview/' + avatar);
                } else {
                    $.crop.init();
                }
            });

            function save() {
                var file = $('#avatar_file').val();
                if (!file) {
                    $.modal.toast.error('请重新选择图片');
                    return;
                }

                var data = new FormData($('#form_avatar')[0]);
                $.operate.post({
                    url: prefix + '/uploadAvatar',
                    cache: false,
                    data: data,
                    processData: false,
                    contentType: false
                }, true, layer_index, layer_callback);
            }

            function closeWin() {
                $.modal.lay.close();
            }
        </script>
    </body>
</html>
